<!--  -->
<template>
  <div class="collect">
    <div class="usercollect">收藏</div>
    <div class="content">
      <ul>
        <li v-for="list in getLists.charts" :key="list.id">
          <router-link :to="'/listdetail/' + list.id">
            <div class="img">
              <img :src="list.face" alt="" />
            </div>
            <div class="title">
              <p>{{ list.name }}</p>
              <p>{{ list.lastText }}</p>
            </div>
            <i class="iconfont icon-jiantou1"></i>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到components对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  computed: {
    getLists() {
      return this.$store.state.lists;
    },
  },
  mounted() {
    this.$store.dispatch("actChangeList");
  },
};
</script>
<style lang='less'>
.collect {
  .usercollect {
    width: 100%;
    height: 4.4rem;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 1.6rem;
    line-height: 4.4rem;
    color: #494949;
    border-bottom: 1px solid #bebebe;
    background: #efefef;
  }
  .content {
    margin-top: 4.4rem;
    ul {
      width: 100%;
      li {
        width: 100%;
        height: 4.4rem;
        line-height: 2.2rem;
        position: relative;
        border-bottom: 1px solid #bebebe;
        .img {
          background: red;
          width: 3.4rem;
          height: 3.4rem;
          border-radius: 2rem;
          overflow: hidden;
          margin-top: 0.5rem;
          margin-left: 2rem;
          float: left;
          margin-right: 2rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          width: 80%;
          float: left;
        }
        .title p:nth-of-type(1) {
          font-weight: bold;
        }
        .title p:nth-of-type(2) {
          width: 90%;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        i {
          position: fixed;
          right: 5%;
          font-weight: bold;
          line-height: 4.4rem;
        }
      }
    }
  }
}
</style>